import React,{useState,useEffect} from 'react';
import Header from './views/Header'
import Login from './views/Login'
import Lunbo from './views/Lunbo'
import header from './views/Header.module.css'
import Particulars from './views/Particulars'
import Women from './views/Women'
import Cart from './views/Cart'
import Fleece1 from './views/Fleece1'
import Fleece2 from './views/Fleece2'
import Sweater2 from './views/Sweater2'
import Sweater1 from './views/Sweater1'
import Men from './views/Men'
import Child from './views/Child'
import Baby from './views/Baby'
import Person from './views/Person'
import { Menu, Dropdown, Icon, BackTop,Input} from 'antd';
import { Carousel } from 'antd';
import {BrowserRouter as Router,Route,NavLink,Switch,Prompt,withRouter,Redirect} from 'react-router-dom'
import { MenuItem } from 'rc-menu';

const { Search } = Input;
const menu = (
  <Menu className={header.s}>
    <Menu.Item className={header.sy}>
      
		分类索引
    </Menu.Item>
    <Menu.Item className={header.sy}>
				<NavLink to="/women">女装</NavLink>
    </Menu.Item>
    <Menu.Item className={header.sy}>
				<NavLink to="/men">男装</NavLink>
    </Menu.Item>
	<Menu.Item className={header.sy}>
			<NavLink to="/baby">婴儿</NavLink>
	</Menu.Item>
	<Menu.Item className={header.sy}>
			<NavLink to="/child">幼儿</NavLink>
	</Menu.Item>
	<Menu.Item className={header.righttp}>
		<img src={require('./img/93FBA2DD7AEEE714AA4568C0EC9F7159.png')}/>
		<img src={require('./img/AFB9A8036BD8A22F0DC0D83B9ECC51CE.jpg')}/>
	</Menu.Item>
  </Menu>
);
const menu1 = (
  <Menu className={header.s}>
    <Menu.Item className={header.sy}>
      
		分类索引
      
    </Menu.Item>
    <Menu.Item className={header.sy}>
     
        新品
    
    </Menu.Item>
    <Menu.Item className={header.sy}>
			<NavLink to="/fleecenv">卫衣</NavLink>
    </Menu.Item>
	<Menu.Item className={header.sy}>
	
	    外套
	 
	</Menu.Item>
	<Menu.Item className={header.sy}>
	 
	   裙装
	  
	</Menu.Item>
	<Menu.Item className={header.righttp}>
		<img src={require('./img/n1.jpg')}/>
		<img src={require('./img/n2.jpg')}/>
	</Menu.Item>
  </Menu>
);
const menu2 = (
  <Menu className={header.s}>
    <Menu.Item className={header.sy}>
      
		分类索引
      
    </Menu.Item>
    <Menu.Item className={header.sy}>
    
        新品
     
    </Menu.Item>
    <Menu.Item className={header.sy}>
			<NavLink to="/fleecenvnan">卫衣</NavLink>
    </Menu.Item>
	<Menu.Item className={header.sy}>
	 
	    衬衫
	  
	</Menu.Item>
	<Menu.Item className={header.sy}>
	 
	   家居服/睡衣
	
	</Menu.Item>
	<Menu.Item className={header.righttp}>
		<img src={require('./img/m1.jpg')}/>
		<img src={require('./img/m2.png')}/>
	</Menu.Item>
  </Menu>
);
const menu3 = (
  <Menu className={header.s}>
    <Menu.Item className={header.sy}>
      
		新品
      
    </Menu.Item>
    <Menu.Item className={header.sy}>
   
        卫衣/外套
      
    </Menu.Item>
    <Menu.Item className={header.sy}>
			<NavLink to="/sweaterchild">针织衫/毛衣</NavLink>
    </Menu.Item>
	<Menu.Item className={header.sy}>
	
	    休闲/打底裤
	 
	</Menu.Item>
	<Menu.Item className={header.sy}>
	
	   牛仔裤
	  
	</Menu.Item>
	<Menu.Item className={header.righttp}>
		<img src={require('./img/y1.jpg')}/>
		<img src={require('./img/y2.jpg')}/>
	</Menu.Item>
  </Menu>
);
const menu4 = (
  <Menu className={header.s}>
    <Menu.Item className={header.sy}>
   
	  新品
    </Menu.Item>
    <Menu.Item className={header.sy}>
        连体衣
    </Menu.Item>
    <Menu.Item className={header.sy}>
			<NavLink to="/sweaterbaby">针织衫/毛衣</NavLink>
    </Menu.Item>
	<Menu.Item className={header.sy}>
	    休闲/打底裤
	</Menu.Item>
	<Menu.Item className={header.sy}>
	   中/短裤
	
	</Menu.Item>
	<Menu.Item className={header.righttp}>
		<img src={require('./img/e1.jpg')}/>
		<img src={require('./img/e2.jpg')}/>
	</Menu.Item>
  </Menu>
);

function App() {
	const [count,setCount]=useState('')
	useEffect(()=>{
		console.log(localStorage.getItem('username'))
	})
  return (
	
    <div >
		<Router>
		<div className={header.headernote}>单笔订单满229元免运费| 正价商品退换货包邮 <a href="">查看详情</a>
		<span className={header.span1}>售后服务热线 400-680-8517</span>
		<span className={header.span2}>在线客服</span>
		</div>
		<div  className={header.logo}>
			<img src="./new-logo-gap.51297b42e37aa2bf88d3c5d0b0e6d093.gif"/>
			<div className={header.user}>
					<span>
						<NavLink to="/login">
							<Icon type="user" /><span >注册/登录</span>
						</NavLink>
					</span>
					<span>
						<NavLink to="/cart">
							<Icon type="shopping" />我的购物袋
						</NavLink>
					</span>
				


				<div></div>
				<span>
					 <Search
					      placeholder="搜索关键词"
					      onSearch={value => {
									if(value=='女装'){
										window.location.href='/women'
									}
									else if(value=='男装'){
										window.location.href='/men'
									}
									else if(value=='婴儿'){
										window.location.href='/baby'
									}
									else if(value=='卫衣女'){
										window.location.href='/fleecenv'
									}
									else if(value=='卫衣男'){
										window.location.href='/fleecenvnan'
									}
									else{
										window.location.href='/child'
									}
								}}
					      style={{ width: 200 }}
					    />
				</span>
			</div>
		</div>
		<div className={header.navbox}>
			<div className={header.sdd}>
			<NavLink to="/index">
				<p>首页</p>
			</NavLink>
			</div>
			<div>
				<Dropdown overlay={menu} className={header.att}>
					<a className="ant-dropdown-link" href="#">
					  新品
					</a>
				</Dropdown>
			</div>
			
			<div>
				<Dropdown overlay={menu1} className={header.att}>
					<a className="ant-dropdown-link" href="#">
					  女装
					</a>
				</Dropdown>
			</div>
			
			<div>
				<Dropdown overlay={menu2} className={header.att}>
					<a className="ant-dropdown-link" href="#">
					  男装
					</a>
				</Dropdown>
			</div>
			
			<div>
				<Dropdown overlay={menu3} className={header.att}>
					  <a className="ant-dropdown-link" href="#">
						幼儿(1-5岁)
					  </a>
				</Dropdown>
			</div>
			
			<div>
				<Dropdown overlay={menu4} className={header.att}>
					<a className="ant-dropdown-link" href="#">
					  婴儿(0-24个月)
					</a>
				 </Dropdown>	
			</div>
			
		</div>
			<Switch>
				<Route path="/index" component={Lunbo}/>
        <Route path="/login" component={Login}/>
				<Route path="/women" component={Women}/>
				<Route path="/cart" component={Cart}/>
				<Route path="/particulars" component={Particulars}/>
				<Route path="/fleecenv" component={Fleece1}/>
				<Route path="/fleecenvnan" component={Fleece2}/>
				<Route path="/sweaterchild" component={Sweater1}/>
				<Route path="/sweaterbaby" component={Sweater2}/>
				<Route path="/men" component={Men}/>
				<Route path="/child" component={Child}/>
				<Route path="/baby" component={Baby}/>
				<Route path="/person" component={Person}/>
				<Redirect to="/index"/>
			</Switch>
			<div className={header.footer}>
				<div className={header.footerleft}>
					<ul><b>用户支持</b>
						<li>新手上路</li>
						<li>会员服务</li>
						<li>支付配送</li>
						<li>帮助中心</li>
						<li>退换维修</li>
					</ul>
					<ul><b>关于Gap</b>
						<li>联系我们</li>
						<li>隐私条款</li>
						<li>加入我们</li>
						<li>品牌故事</li>
					</ul>
					<ul><b>网站咨询</b>
						<li>订购热线：400-690-5151</li>
						<li>服务时间：10:00-22：00</li>
						<li>售后服务热线：400-680-8517</li>
						<li>服务时间：10:00-19:00</li>
					</ul>
				</div>
				<div className={header.footerright}>
					<div>
						<h2><b>门店查询</b></h2>
						<img src="https://gap-cn-node.oss-cn-shanghai.aliyuncs.com/casaba_plus_assets/prod-2019.11.18-3/static/FOOTER_store.06dde1c909439e219a92dd4dc27f63b4.jpg"/>
						<div><a href="https://www.gap.cn/storeLocator">立即查询</a></div>
						<p>门店电话：021-60934300</p>
					</div>
					<div>
						<h2><b>关注我们</b></h2>
						<img src="https://gap-cn-node.oss-cn-shanghai.aliyuncs.com/casaba_plus_assets/prod-2019.11.18-3/static/weixin_new.e9fcf2dd0227f8a7bc852f23de2a9ee8.png"/>
					</div>
					<div>
						<h2><b>下载GAP APP</b></h2>
						<img src="https://gap-cn-node.oss-cn-shanghai.aliyuncs.com/casaba_plus_assets/prod-2019.11.18-3/static/qrcode@2x.10ee7de6775e788bf18eac477241d932.png"/>
					</div>
				</div>
				<div className={header.fft}>
					<p>Gap全球站点： United States | Canada | Japan | Europe</p>
					<p>沪ICP备10200002号|<img src=""></img>沪公网备31010602000818|<img src=""></img>上海工商</p>
					<p><b>浏览该网站表示您接收并同意我们使用cookies为您提供个性化的浏览体验。如需更改管理，请点击 隐私条款 了解详情</b></p>
					<p><b>© 2019 Gap Inc.</b></p>
				</div>
			</div>
		</Router>
		<div className={header.back}>
			<BackTop className={header.back}>
				<div className="ant-back-top-inner">
					<Icon className={header.tt} type="arrow-up" />
				</div>
			</BackTop>
			
    </div>
    </div>
  )
	
}

export default App;
